'use client';

import { useSession } from '@/lib/auth-client';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import AuthForm from '@/components/auth/AuthForm';
import UserProfile from '@/components/auth/UserProfile';
import Link from 'next/link';

export default function Home() {
  const { data: session, isPending } = useSession();
  const router = useRouter();

  // 如果用户已登录，自动跳转到dashboard
  useEffect(() => {
    if (session?.user?.id) {
      router.push(`/${session.user.id}/dashboard`);
    }
  }, [session, router]);

  // 如果正在加载会话信息，显示加载状态
  if (isPending) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        <span className="ml-3 text-gray-600">加载中...</span>
      </div>
    );
  }

  // 如果用户未登录，重定向到认证页面
  if (!session) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12">
        <div className="max-w-md mx-auto px-4 text-center">
          <h1 className="text-3xl font-bold mb-4 text-gray-800">
            欢迎使用全栈应用
          </h1>
          <p className="text-gray-600 mb-8">
            请登录或注册以继续使用
          </p>
          <div className="space-y-4">
            <Link
              href="/auth/login"
              className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors flex items-center justify-center"
            >
              登录账户
            </Link>
            <Link
              href="/auth/register"
              className="w-full bg-gray-100 text-gray-700 py-3 px-4 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors flex items-center justify-center"
            >
              创建新账户
            </Link>
          </div>
        </div>
      </div>
    );
  }

  // 如果用户已登录，显示跳转加载状态
  return (
    <div className="flex justify-center items-center min-h-screen">
      <div className="text-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
        <p className="text-gray-600">正在跳转到您的仪表板...</p>
      </div>
    </div>
  );
}